<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold">仓位止盈止损</p>
		</template>
		<template #default>
			<div class="w-full">
				<div class="mt-10px w-full">
					<div class="flex items-center justify-between text-12px text-#86909C">
						<p>合约</p>
						<p class="text-#07B175">BTCUSDT 永续 20x</p>
					</div>
					<div class="flex items-center justify-between text-12px text-#86909C mt-10px">
						<p>开仓价格</p>
						<p class="text-#ffffff">99141.30 USDT</p>
					</div>
					<div class="flex items-center justify-between text-12px text-#86909C mt-10px">
						<p>标记价格</p>
						<p class="text-#ffffff">99141.30 USDT</p>
					</div>
					<div class="mt-20px flex items-center w-full text-16px h-60px bg-#272727 box-border border-1px border-solid rounded-8px pr-20px pl-20px"
						:class="{
							'border-#114CEE': inputFocus1,
							'border-#3A3A3A': !inputFocus1
						}">
						<p class="w-30% text-#86909C ">止盈 USDT</p>
						<div class="w-80%">
							<el-input style="font-size: 16px;" placeholder="0.00" direction="rtl"
								@blur="inputFocus1 = false" @focus="inputFocus1 = true" />
						</div>
						<p class="text-#ffffff w-10% box-border text-right border-l-1px border-solid border-#86909C">最新</p>
					</div>
					<p class="mt-10px text-12px text-#86909C
					pb-20px  border-b-1px border-solid border-#3A3A3A">
						当
						<span class="text-[#fff]">最新价格</span>
						到达
						<span class="text-[#fff]">0.00</span>
						时，将会触发市价止盈委托平仓当前仓位。预计盈亏为--
						USDT
					</p>
					
					<div class="mt-20px flex items-center w-full text-16px h-60px bg-#272727 box-border border-1px border-solid rounded-8px pr-20px pl-20px"
						:class="{
							'border-#114CEE': inputFocus2,
							'border-#3A3A3A': !inputFocus2
						}">
						<p class="w-30% text-#86909C ">止损 USDT</p>
						<div class="w-80%">
							<el-input style="font-size: 16px;" placeholder="0.00" direction="rtl"
								@blur="inputFocus2 = false" @focus="inputFocus2 = true" />
						</div>
						<p class="text-#ffffff w-10% box-border text-right border-l-1px border-solid border-#86909C">最新</p>
					</div>
					<p class="mt-10px text-12px text-#86909C
					pb-20px">
						当
						<span class="text-[#fff]">最新价格</span>
						到达
						<span class="text-[#fff]">0.00</span>
						时，将会触发市价止盈委托平仓当前仓位。预计盈亏为--
						USDT
					</p>
					<p class="mt-20px text-12px text-#86909C">
						该止盈止损针对整个仓位(无论加仓或者减仓)。平仓后该止盈止损将被自动取消。当价格到达设定的触发价格时，将执行市价平仓委托。如果仓位数量超过市价委托单笔最大数量限制时，委托将被拒绝。
					</p>
				</div>
				<div class="mt-40px">
					<el-button color="#114CEE" style="width: 100%;height:50px;color:#fff;font-size:18px;">确认</el-button>
				</div>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close']);
const inputFocus1 = ref<boolean>(false);
const inputFocus2 = ref<boolean>(false);
const handleClose = () => {
	emit('close', false);
}
</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper {
	background-color: #272727;
	border: none;
	box-shadow: none;
}

::v-deep .el-input__inner {
	text-align: right;
	color: #ffffff;
}
</style>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}
</style>
